<template>
  <el-dialog
    class="eldialog el-dialog-m0"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    append-to-body
    top="2vh"
    width="90%"
    :close-on-press-escape="false"
    element-loading-text="数据加载中"
    v-loading="loading"
  >
    <el-form :inline="true" :model="msgData" :rules="rules" ref="msgData" class="demo-form-inline">
      <el-row>
        <el-col :span="24" align="center">
          <el-form-item prop="dw">
            <el-input :disabled="flag" maxlength="30" size="small" placeholder="请输入单位名称" v-model="msgData.dw"></el-input>
          </el-form-item>
          <span style="font-size: 28px;line-height: 32px;font-weight: 900;height: 50px;">2022年度年轻干部年度完成情况统计表</span>
          <el-button style="margin-right: 30px;margin-top: 10px;float: right" type="primary" plain @click="downZip"
          >&nbsp;导出<i class="el-icon-upload el-icon--right"></i>
          </el-button>

          <el-button v-if="btType === '2'" style="margin-right: 10px;margin-top: 10px;float: right" type="primary"
                     icon="el-icon-edit" plain
                     @click="auditTable()" :disabled="shztEnd === '1' || shztGHB === '1'">&nbsp;审核
          </el-button>
          <el-button v-if="btType === '2' && (shztEnd === '1'||shztGHB === '1')"
                     style="margin-right: 10px;margin-top: 10px;float: right" type="primary" icon="el-icon-edit" plain
                     @click="flag = false;shztEnd = '0';shztGHB = '0'">&nbsp;修改
          </el-button>
          <el-button v-if="role == '系统管理员'" style="margin-right: 10px;margin-top: 10px;float: right" type="primary"
                     icon="el-icon-edit" plain
                     @click="save('msgData')">&nbsp;保存
          </el-button>
          <el-button v-else style="margin-right: 10px;margin-top: 10px;float: right" type="primary" icon="el-icon-edit"
                     plain
                     @click="save('msgData')" :disabled="flag">&nbsp;保存
          </el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="填表人：" prop="tbr">
          <el-input :disabled="flag" maxlength="15" size="small" placeholder="请输入填表人姓名"
                    v-model="msgData.tbr">
          </el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="lxfs">
          <el-input :disabled="flag" size="small" placeholder="请输入联系方式"
                    oninput="if(value.length>15)value=value.slice(0,15)"
                    v-model="msgData.lxfs">
          </el-input>
        </el-form-item>
        <el-form-item  label="表格盖章扫描:" >
          <div v-if="excelData.excelFile == ''">
            <el-upload style="margin-bottom: 5px"   class="upload-demo"
                       accept=".pdf"
                       :action="fileServerPath"
                       :show-file-list="false"
                       :on-success="(response, file, fileList)=> excelFileUpload(response, file, fileList)"
                       :before-upload="beforeAvatarUpload"
                       :multiple="false"
                       :disabled="flag">
              <el-button :disabled="flag" size="small" type="primary">
                上传<i class="el-icon-upload el-icon--right"></i>
              </el-button>
            </el-upload>
          </div>
          <div v-else-if="excelData.excelFile != '' && flag == true">
            <el-link   type="primary"  @click="showFile(excelData.excelFile)">
              {{excelData.excelFileName}}
            </el-link>
          </div>
          <div v-else>
            <el-upload style="margin-bottom: 5px"   class="upload-demo"
                       accept=".pdf"
                       :action="fileServerPath"
                       :show-file-list="false"
                       :on-success="(response, file, fileList)=> excelFileUpload(response, file, fileList)"
                       :before-upload="beforeAvatarUpload"
                       :multiple="false"
                       :disabled="flag">
              <a>{{excelData.excelFileName}}</a>
            </el-upload>
          </div>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row>
      <vxe-table style="width: 100%"
                border
                :data="wcqktjData">
        <vxe-colgroup 
          width="25%"
          title="市级党政工作部门正职"
          align="center">
          <vxe-column
            title="批复职数"
            align="center">
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.sjzzPfzs">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            width="120"
            align="center">
            <template slot="header">      
              <div>2021年底</div>
              <div>配备41岁以下</div>
              <div>干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.sjzzPb2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>年内计划补充</div>
              <div>41岁以下</div>
              <div>干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.sjzzJh2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            width="120"
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>41岁以下干部</div>
              <div>计划达到（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.sjzzJh2022">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            width="120"
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>配备41岁以</div>
              <div>下干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.sjzzPb2022">
              </el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup 
          width="25%"
          title="县（市、区）党政正职"
          align="center">
          <vxe-column
            title="批复职数"
            align="center">
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjzzPfzs">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2021年底配</div>
              <div>备41岁以下</div>
              <div>干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjzzPb2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            width="120"
            align="center">
            <template slot="header">      
              <div>2021年底</div>
              <div>配备41岁以下</div>
              <div>干部占比（%）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjzzPbzb2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>年内计划补充</div>
              <div>41岁以下</div>
              <div>干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjzzJh2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            width="120"
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>41岁以下干部</div>
              <div>计划达到（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjzzJh2022">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            width="120"
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>配备41岁</div>
              <div>以下干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjzzPb2022">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            width="120"
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>41岁以下</div>
              <div>干部占比（%）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjzzPbzb2022">
              </el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
      </vxe-table>
    </el-row>
    <el-row>
      <vxe-table style="width: 100%"
                border
                :data="wcqktjData">
        <vxe-colgroup 
          width="25%"
          title="县级党政领导班子"
          align="center">
          <vxe-column
            title="批复职数"
            align="center">
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjbzPfzs">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2021年底</div>
              <div>配备41岁</div>
              <div>以下干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjbzPb2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2021年底</div>
              <div>配备41岁以下</div>
              <div>干部占比（%）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjbzPbzb2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>年内计划补充</div>
              <div>41岁以下</div>
              <div>干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjbzJh2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>41岁以下干部</div>
              <div>计划达到（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjbzJh2022">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>配备41岁</div>
              <div>以下干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjbzPb2022">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>41岁以下</div>
              <div>干部占比（%）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xjbzPbzb2022">
              </el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup 
          width="25%"
          title="乡镇（街道）党政正职"
          align="center">
          <vxe-column
            title="批复职数"
            align="center">
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xzzzPfzs">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2021年底</div>
              <div>配备36岁</div>
              <div>以下干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xzzzPb2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2021年底</div>
              <div>配备36岁以下</div>
              <div>干部占比（%）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xzzzPbzb2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>年内计划补充</div>
              <div>36岁以下</div>
              <div>干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xzzzJh2021">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>36岁以下干部</div>
              <div>计划达到（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xzzzJh2022">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>配备36岁</div>
              <div>以下干部（人）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xzzzPb2022">
              </el-input>
            </template>
          </vxe-column>
          <vxe-column
            align="center">
            <template slot="header">      
              <div>2022年底</div>
              <div>36岁以下</div>
              <div>干部占比（%）</div>
            </template>
            <template slot-scope="scope">
              <el-input :disabled="flag" oninput="value = value.replace(/[^\d.]/g,'')"
                        v-model="scope.row.xzzzPbzb2022">
              </el-input>
            </template>
          </vxe-column>
        </vxe-colgroup>
      </vxe-table>
    </el-row>
    <archiveFile-show ref="dialogarchiveFile"/>
  </el-dialog>
</template>

<script>

  /*方法引用*/
  import {getList, save,downLsqk,auditTable} from '@/api/young/evaluation/infoFilling/infoFilling.js';
  import webapp from "@/config/webapp";
  import archiveFileShow from "@/views/young/evaluation/archiveFile";

  export default {
    name: "wcqktjTable_ds",
    components: {'archiveFile-show': archiveFileShow,},
    data() {
      return {
        title: '完成情况统计表',
        visible: false,
        pdfUrl: '',
        heightY: window.innerHeight - 90 + 'px',
        heightZ: window.innerHeight - 360 + 'px',
        widthY: window.innerWidth / 2 - 50 + 'px',
        fileServerPath: webapp.GHB_URL+'/evaluation/excel/fileUpload',

        loading: false,
        flag:false,
        btType:'',
        role:'',
        shztEnd:'',
        shztGHB:'',
        taskId: '',
        wcqktjData: [
          {
            'id': '1',
            'taskId': '1',
            'sjzzPfzs': '1',
            'sjzzPb2021': '1',
            'sjzzJh2021': '1',
            'sjzzJh2022': '1',
            'sjzzPb2022': '1',
            'xjzzPfzs': '1',
            'xjzzPb2021': '1',
            'xjzzPbzb2021': '1',
            'xjzzJh2021': '1',
            'xjzzJh2022': '1',
            'xjzzPb2022': '1',
            'xjzzPbzb2022': '1',
            'xjbzPfzs': '1',
            'xjbzPb2021': '1',
            'xjbzPbzb2021': '1',
            'xjbzJh2021': '1',
            'xjbzJh2022': '1',
            'xjbzPb2022': '1',
            'xjbzPbzb2022': '1',
            'xzzzPfzs': '1',
            'xzzzPb2021': '1',
            'xzzzPbzb2021': '1',
            'xzzzJh2021': '1',
            'xzzzJh2022': '1',
            'xzzzPb2022': '1',
            'xzzzPbzb2022': '1',
          },
          {
            'id': '2',
            'taskId': '2',
            'sjzzPfzs': '1',
            'sjzzPb2021': '1',
            'sjzzJh2021': '1',
            'sjzzJh2022': '1',
            'sjzzPb2022': '1',
            'xjzzPfzs': '1',
            'xjzzPb2021': '1',
            'xjzzPbzb2021': '1',
            'xjzzJh2021': '1',
            'xjzzJh2022': '1',
            'xjzzPb2022': '1',
            'xjzzPbzb2022': '1',
            'xjbzPfzs': '1',
            'xjbzPb2021': '1',
            'xjbzPbzb2021': '1',
            'xjbzJh2021': '1',
            'xjbzJh2022': '1',
            'xjbzPb2022': '1',
            'xjbzPbzb2022': '1',
            'xzzzPfzs': '1',
            'xzzzPb2021': '1',
            'xzzzPbzb2021': '1',
            'xzzzJh2021': '1',
            'xzzzJh2022': '1',
            'xzzzPb2022': '1',
            'xzzzPbzb2022': '1',
          }
        ],
        msgData: {
          "id": "",
          "dw": "",
          "tbr": "",
          "lxfs": "",
          "taskId": "",
          "sjd": ""
        },
        excelData: {
          "excelFile":"",
          "excelFileName":"",
        },
        rules: {
          tbr: [
            {required: true, message: '请输入填表人姓名', trigger: 'blur'}
          ],
          lxfs: [
            {required: true, message: '请输入联系方式', trigger: 'blur'}
          ],
          dw: [
            {required: true, message: '请输入联系方式', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      async initShow(task,role,shztGHB,type) {
        this.task =task;
        this.btType = type;
        this.taskId = task.id;
        this.role = role;
        this.shztGHB = shztGHB;
        this.visible = true;
        this.msgData = {};
        this.excelData.excelFileName = "";
        this.excelData.excelFile = "";
        this.wcqktjData = [];
        const params = {
          'taskId': task.id,
          'type': '5'
        };
        this.loading = true;
        getList(params).then((data) => {
          console.log(data.resultdata)
          if (data.type) {
            if (data.resultdata.bt) {
              this.msgData = data.resultdata.bt
              this.shztEnd = data.resultdata.bt.shztEnd
            }
            if (data.resultdata.list) {
              this.wcqktjData = data.resultdata.list
            }
            if (data.resultdata.excelList) {
              this.excelData.excelFile = data.resultdata.excelList[0].excelFile;
              this.excelData.excelFileName = data.resultdata.excelList[0].excelFileName;
            }
            this.loading = false;
          } else {
            this.$message.error(data.message)
          }
          if (this.shztGHB == '1' || this.shztEnd == '1'){
            console.log(111)
            this.flag = true;
          }else {
            console.log(222)
            var jgid= JSON.parse(sessionStorage.getItem(`userInfo`)).organizeId
            if (jgid !== task.dwBianma) {
              console.log(333)
              if (role == '系统管理员'||role.indexOf('干部一处')>-1||role.indexOf('干部二处')>-1||
                role.indexOf('干部三处')>-1||role.indexOf('干部四处')>-1||role.indexOf('干部五处')>-1) {
                console.log(555)
                this.flag = true;
              }else {
                console.log(666)
                this.flag = false;
              }
            }else {
              console.log(444)
              this.flag = false;
            }
          }
        })
      },
      //表格扫描附件上传函数
      excelFileUpload(response, file, fileList) {
        this.excelData.excelFile = response.url;
        this.excelData.excelFileName = file.name;
      },
      //文件格式约束
      beforeAvatarUpload(file) {
        console.log(file,'beforeFile')
        const isPDF = file.name.substring(file.name.lastIndexOf('.') + 1) === 'pdf';
        const fileSize = file.size/1024
        if (fileSize > 2*1024){
          this.$message.error('上传附件材料不能大于2M!');
          return false
        }
        if (!isPDF) {
          this.$message.error('上传的附件材料后缀只能是.pdf的文件格式!');
        }
        return isPDF;
      },
      //保存
      save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否保存?', '操作提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.msgData.taskId = this.taskId;
              this.msgData.sjd = 'end'
              this.wcqktjData.forEach((item) => {
                item.taskId = this.taskId;
              });
              const params = {
                'bt': this.msgData,
                'excelData': this.excelData,
                'data': this.wcqktjData,
                'type': '5'
              };
              this.loading = true;
              save(params).then((data) => {
                console.log(data.result)
                if (data.result) {
                  this.loading = false;
                  this.$message.success('保存成功!')
                  this.visible = false;
                } else {
                  this.loading = false;
                  this.$message.error(data.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消保存'
              });
            });
          }
        });
      },

      //审核
      auditTable(){
        this.$confirm('是否审核通过?', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.msgData.taskId = this.taskId;
          this.msgData.sjd = 'begin'
           const params = {
            'id': this.msgData.id,
            'task': this.task,
            'type': '5'
          };
          this.loading = true;
          auditTable(params).then((data) => {
            if (data.result) {
              this.loading = false;
              this.$message.success('审核通过!')
              this.visible = false;
            } else {
              this.loading = false;
              this.$message.error(data.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核!'
          });
        });
      },
      //文件预览
      showFile(fileurl) {
        this.$nextTick(() => {
          this.$refs.dialogarchiveFile.initShow(fileurl)
        })
      },
        //下载
        downZip(){
            const month= new Date().getMonth() + 1;
            const params = {
                taskId: this.taskId,
                type : 5,
              fileName:this.msgData.dw+"年底评估(" +
                new Date().getFullYear() +"年"+month+ "月).zip"
            }
            this.$confirm('是否下载?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.pageLoading = true;
                downLsqk(params).then(result => {
                    this.pageLoading = false;
                    // this.$alert('成功')
                })
            })
        },
    }
  }
</script>

<style scoped>
   >>>.el-input.is-disabled .el-input__inner{
    color: #606266;
  }
  /*调整表格文字*/
  >>>.vxe-header--column .vxe-cell--title{
    font-size: 14px;
    font-weight: normal;
    color:#000;
  }
  >>>.vxe-header--row{
    background:#fff;
  }
</style>
